<script>
import { cloneDeep, findIndex, flattenDeep, uniqBy } from 'lodash'
import {
  computed,
  defineComponent,
  onUnmounted,
  reactive,
  ref,
  toRaw,
  watch,
} from 'vue'
import * as Antd from 'ant-design-vue'
import ProductAttribute from '@Page/my/components/tag/productAttribute'
import { libFileDetail } from '@Config/server/api'
import TagsList from '@Page/myMarkGroup/components/tagsList'
import { tagListTagGroup, libPicBatchAddTag } from '@Config/server/api'
import CheckBoxTags from '@Components/checkBoxTags'

import { Messages } from '@Config/config'
import { message } from 'ant-design-vue'
import { confirm } from '@Config/config'

export default defineComponent({
  props: {
    allList: {
      type: Array, //当前目录下面，所有的图片
      default: () => {
        return []
      },
    },
    selected: {
      //当前选中的文件
      type: Array,
      default: () => {
        return []
      },
    },
  },
  emits: ['result'],
  setup(props, context) {
    let loading = ref(false)
    //把当前选中的放到数组中来，并保持在第一的位置
    let allList = reactive({
      data: [],
    })

    //不支持文件夹打 标签 提示
    let folder = props.selected.filter((x) => x.fileType == 0)
    if (folder.length > 0) {
      confirm({
        title: <span class="red">警告</span>,
        content: (
          <span>
            {folder.map((x) => {
              return <span class="red">[{x.name}]</span>
            })}{' '}
            是文件夹类型,不支持打标签
          </span>
        ),
      })
    }

    //获取产品详情
    let marks = reactive({ data: [] })

    let currentObject = computed(() => {
      return props.selected.map((x) => x.id)
    })
    //更新文件标签
    let updateTagsHandler = (e) => {
      context.emit('result', {
        list: e.list,
        currentObject: [...toRaw(currentObject.value)],
      })
    }

    let tagsGroupList = reactive({ data: [], selected: [] })

    //加载个人标签组，以供用户快速选择标签集合
    tagListTagGroup({ size: 10000, index: 1 }).then((x) => {
      tagsGroupList.data = x.data.records.map((x) => {
        x.label = x.name
        x.value = x.id
        return x
      })
    })

    //标签分组
    let selectChangeHandler = async (e, option) => {
      ckTags.value.tags.data.map((x) => {
        option.child.map((xx) => {
          let _index = findIndex(x.child, { id: xx.tagId })
          if (_index >= 0) {
            x.child[_index].loading = true
          }
        })
      })
      let _r = await libPicBatchAddTag({
        ids: currentObject.value,
        tagIdList: option.child.map((x) => x.tagId),
        model: 1,
      })
      ckTags.value.tags.data.map((x) => {
        option.child.map((xx) => {
          let _index = findIndex(x.child, { id: xx.tagId })
          if (_index >= 0) {
            x.child[_index].loading = false
          }
        })
      })
      if (_r.code == 0) {
        Messages.add(message.success(`操作成功`))
        option.child.map((x) => {
          let _index = findIndex(marks.data, { tagId: x.tagId })
          if (_index < 0) {
            marks.data.push(x)
          }
        })
      }
    }

    let dSelectHandler = async (value, option) => {
      ckTags.value.tags.data.map((x) => {
        option.child.map((xx) => {
          let _index = findIndex(x.child, { id: xx.tagId })
          if (_index >= 0) {
            x.child[_index].loading = true
          }
        })
      })
      let _r = await libPicBatchAddTag({
        ids: currentObject.value,
        tagIdList: option.child.map((x) => x.tagId),
        model: 0,
      })
      ckTags.value.tags.data.map((x) => {
        option.child.map((xx) => {
          let _index = findIndex(x.child, { id: xx.tagId })
          if (_index >= 0) {
            x.child[_index].loading = false
          }
        })
      })
      if (_r.code == 0) {
        Messages.add(message.success(`操作成功`))
        option.child.map((x) => {
          let _index = findIndex(marks.data, { tagId: x.tagId })
          if (_index >= 0) {
            marks.data.splice(_index, 1)
          }
        })
      }
    }

    let checkboxSelectHandler = async ({ cate, tag, model }) => {
      let _r = await libPicBatchAddTag({
        ids: currentObject.value,
        tagIdList: tag.map((x) => x.id),
        model: model,
      })

      ckTags.value.tags.data.map((x) => {
        tag.map((xx) => {
          let _index = findIndex(x.child, { id: xx.id })
          if (_index >= 0) {
            x.child[_index].loading = false
          }
        })
      })
      if (_r.code == 0 && model == 1) {
        tag.map((x) => {
          marks.data.push({ ...x, selected: true, tagId: x.id })
        })

        Messages.add(message.success(`操作成功`))
      } else if (_r.code == 0 && model == 0) {
        tag.map((x) => {
          let _index = findIndex(marks.data, { tagId: x.id })
          if (_index >= 0) {
            marks.data.splice(_index, 1)
          }
        })
      } else {
        Messages.add(message.error(`操作失败[${_r.msg}]`))
      }
    }
    let ckTags = ref()
    return {
      marks,
      loading,
      updateTagsHandler,
      tagsGroupList,
      selectChangeHandler,
      dSelectHandler,
      checkboxSelectHandler,
      ckTags,
    }
  },
  render() {
    return (
      <Antd.Row gutter={[20, 20]}>
        {this.loading && <Antd.Spin />}

        <Antd.Col span={24}>
          <Antd.Space>
            <Antd.Select
              style={{ 'min-width': '200px' }}
              options={this.tagsGroupList.data}
              placeholder="标签组选项"
              value={this.tagsGroupList.selected}
              mode="multiple"
              onSelect={this.selectChangeHandler}
              onDeselect={this.dSelectHandler}
            ></Antd.Select>
          </Antd.Space>
        </Antd.Col>
        <Antd.Col span={24}>
          <CheckBoxTags
            ref="ckTags"
            onSelect={this.checkboxSelectHandler}
            selectedList={this.marks.data}
          />
        </Antd.Col>
      </Antd.Row>
    )
  },
})
</script>
